<script lang="ts" setup>
import { useViewer } from '../../stores/viewer';
import { createNumberRef, createBoolRef, createStringRef } from './sceenConfig';
const viewer: any = useViewer().viewer;

const settingOptions = viewer.zz._settingOptions;

// HDR
const highDynamicRange = createBoolRef('highDynamicRange', settingOptions);
// 二三维模式
const sceneMode = createNumberRef('mode', settingOptions);

// let requestWebgl2 = createBoolRef("requestWebgl2", settingOptions);

// let msaaSamples = createNumberRef("msaaSamples", settingOptions);

const fxaa = createBoolRef('fxaa', settingOptions);

const sun = createBoolRef('sun', settingOptions);

const moon = createBoolRef('moon', settingOptions);

const showSkyBox = createBoolRef('showSkyBox', settingOptions);

const backgroundColor = createStringRef('backgroundColor', settingOptions);

// 大气外光圈
const showSkyAtmosphere = createBoolRef('showSkyAtmosphere', settingOptions);

// 雾
const fog = createBoolRef('fog', settingOptions);
</script>
<template>
  <table class="zz-scene-table">
    <tbody>
      <tr>
        <td class="first-col">场景模式</td>
        <td class="secode-col">
          <el-radio-group v-model="sceneMode">
            <el-radio :label="3">三维视图</el-radio>
            <el-radio :label="2">二维视图</el-radio>
          </el-radio-group>
        </td>
      </tr>
      <tr>
        <td>高动态渲染</td>
        <td>
          <el-switch v-model="highDynamicRange" inline-prompt active-text="是" inactive-text="否" />
        </td>
      </tr>
      <!-- <tr>
        <td>使用Webgl2</td>
        <td>
          <el-switch v-model="requestWebgl2" inline-prompt active-text="是" inactive-text="否" />
        </td>
      </tr>
      <tr>
        <td>MSAA抗锯齿</td>
        <td>
          <el-radio-group v-model="msaaSamples">
            <el-radio :label="1">无</el-radio>
            <el-radio :label="2">二倍</el-radio>
            <el-radio :label="4">四倍</el-radio>
            <el-radio :label="8">八倍</el-radio>
          </el-radio-group>
        </td>
      </tr> -->

      <tr>
        <td>快速抗锯齿</td>
        <td>
          <el-switch v-model="fxaa" inline-prompt active-text="是" inactive-text="否" />
        </td>
      </tr>

      <tr>
        <td>显示太阳</td>
        <td>
          <el-switch v-model="sun" inline-prompt active-text="是" inactive-text="否" />
        </td>
      </tr>
      <tr>
        <td>显示月亮</td>
        <td>
          <el-switch v-model="moon" inline-prompt active-text="是" inactive-text="否" />
        </td>
      </tr>
      <tr>
        <td>显示天空盒</td>
        <td>
          <el-switch v-model="showSkyBox" inline-prompt active-text="是" inactive-text="否" />
        </td>
      </tr>
      <tr title="请关闭天空盒看效果">
        <td>空间背景颜色</td>
        <td>
          <el-color-picker v-model="backgroundColor" />
        </td>
      </tr>
      <tr>
        <td>大气外光圈</td>
        <td>
          <el-switch v-model="showSkyAtmosphere" inline-prompt active-text="开" inactive-text="关" />
        </td>
      </tr>
      <tr>
        <td>雾化效果</td>
        <td>
          <el-switch v-model="fog" inline-prompt active-text="开" inactive-text="关" />
        </td>
      </tr>
    </tbody>
  </table>
</template>

<style scoped>
@import './sceneConfig.css';
</style>
